<template>
	<div>
		<el-card class="box-card" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
		  <div slot="header" class="clearfix header">
		    <span class="header-teaching"><i class="el-icon-tickets"></i>&nbsp;&nbsp;教案 <i class="el-icon-arrow-right"></i></span>
		    <span class="head">{{contentList.motion}}</span>
		    <div style="float: right;" type="text" class="back" @click="back">返回</div>
		  </div>
		  <div class="top-teaching">
		     	<span class="head">教案名称：<span class="head-content">{{contentList.motion}}</span></span>
		     	适应年级：<span v-for="item in contentList.grade_id" class="top-grade">{{item.grade_title}}</span>
		     	<!-- <button class="top-homework">家庭作业</button> -->
		  </div>
		  <div class="text item">
		    <el-collapse v-model="activeName">
				<el-collapse-item title="基本信息" name="1" class="text-title">
					<div v-if="contentList.contents == ''?false:true">
						<h4><span class="circle"></span>教学内容</h4>
						<div class="textarea" disabled><pre>{{contentList.contents}}</pre></div>
					</div>
					<div v-if="contentList.equipment == ''?false:true">
						<h4><span class="circle"></span>场地器材</h4>
						<div class="textarea" disabled><pre>{{contentList.equipment}}</pre></div>
					</div>
					<div v-if="contentList.target == ''?false:true">
						<h4><span class="circle"></span>教学目标</h4>
						<div class="textarea" disabled><pre>{{contentList.target}}</pre></div>
					</div>
					<div v-if="contentList.load_target == ''?false:true">
						<h4><span class="circle"></span>负荷目标</h4>
						<div class="textarea" disabled><pre>{{contentList.load_target}}</pre></div>
					</div>
					<div v-if="contentList.teaching_emphasis == ''?false:true">
						<h4><span class="circle"></span>教学重点</h4>
						<div class="textarea" disabled><pre>{{contentList.teaching_emphasis}}</pre></div>
					</div>
					<div v-if="contentList.difficulty == ''?false:true">
						<h4><span class="circle"></span>教学难点</h4>
						<div class="textarea" disabled><pre>{{contentList.difficulty}}</pre></div>
					</div>
					<div v-if="contentList.security == ''?false:true">
						<h4><span class="circle"></span>安全措施</h4>
						<div class="textarea" disabled><pre>{{contentList.security}}</pre></div>
					</div>
				</el-collapse-item>
				<el-collapse-item title="教学阶段-开始部分" name="2">
					<div v-for="item in contentList.start_part">
						<span class="text-content" v-if="item.one_title == ''?false:true">{{item.one_title}}</span>
						<div  v-if="item.one_contents == ''?false:true">
							<h4><span class="circle"></span>教学内容</h4>
							<div class="textarea" disabled><pre>{{item.one_contents}}</pre></div>
						</div>
						<div v-if="item.one_activity == ''?false:true">
							<h4><span class="circle"></span>教师活动</h4>
							<div class="textarea" disabled><pre>{{item.one_activity}}</pre></div>
						</div>
						<div v-if="item.one_s_activity == ''?false:true">
							<h4><span class="circle"></span>学生活动</h4>
							<div class="textarea" disabled><pre>{{item.one_s_activity}}</pre></div>
						</div>
						<div v-if="item.one_img == ''?false:true">
							<h4><span class="circle"></span>组织形式</h4>
							<div class="tupian"><img :src="item.one_img"/></div>
						</div>
						<div v-if="contentList.start_part[0].one_video == ''?false:true">
							<h4><span class="circle"></span>教学视频</h4>
							<video width="800" height="" class="video-js vjs-default-skin" :src="contentList.start_part[0].one_video" controls preload="auto">
								<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
									<param name="movie" value="myvideo.swf" />
									<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
								</object>
							</video>
						</div>
					</div>
			  </el-collapse-item>
			  <el-collapse-item title="教学阶段-准备部分" name="3">
			    <div v-for="item in contentList.preparation_part">
			    	<span class="text-content" v-if="item.two_title == ''?false:true">{{item.two_title}}</span>
					  <div  v-if="item.two_contents == ''?false:true">
				    	<h4><span class="circle"></span>教学内容</h4>
						<div class="textarea" disabled><pre>{{item.two_contents}}</pre></div>
				    </div>
				    <div  v-if="item.two_activity == ''?false:true">
				    	<h4><span class="circle"></span>教师活动</h4>
						<div class="textarea" disabled><pre>{{item.two_activity}}</pre></div>
				    </div>
				    <div  v-if="item.two_s_activity == ''?false:true">
				    	<h4><span class="circle"></span>学生活动</h4>
						<div class="textarea" disabled><pre>{{item.two_s_activity}}</pre></div>
				    </div>
				    <div  v-if="item.two_img == ''?false:true">
				    	<h4><span class="circle"></span>组织形式</h4>
				    	<div class="tupian"><img :src="item.two_img"/></div>
				    </div>
				    <div v-if="item.two_video == ''?false:true">
				    	<h4><span class="circle"></span>教学视频</h4>
				    	<video width="800" height="" class="video-js vjs-default-skin" controls preload="auto">
							<source :src="item.two_video" type="video/mp4"></source>
							<source :src="item.two_video" type="video/ogg"></source>
							<source :src="item.two_video" type="video/webm"></source>
							<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
								<param name="movie" value="myvideo.swf" />
								<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
							</object>
						</video>
				    </div>
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="教学阶段-基本部分 " name="4">
          <div v-for="item in contentList.basic_part">
			    	<span class="text-content" v-if="item.three_title == ''?false:true">{{item.three_title}}</span>
					  <div v-if="item.three_contents == ''?false:true">
				    	<h4><span class="circle"></span>教学内容</h4>
						<div class="textarea" disabled><pre>{{item.three_contents}}</pre></div>
				    </div>
				    <div v-if="item.three_activity == ''?false:true">
				    	<h4><span class="circle"></span>教师活动</h4>
						<div class="textarea" disabled><pre>{{item.three_activity}}</pre></div>
				    </div>
				    <div v-if="item.three_s_activity == ''?false:true">
				    	<h4><span class="circle"></span>学生活动</h4>
						<div class="textarea" disabled><pre>{{item.three_s_activity}}</pre></div>
				    </div>
				    <div v-if="item.three_img == ''?false:true">
				    	<h4><span class="circle"></span>组织形式</h4>
				    	<div class="tupian"><img :src="item.three_img"/></div>
				    </div>
				    <div v-if="item.three_video == ''?false:true">
						<h4><span class="circle"></span>教学视频</h4>
						<video width="800" height="" class="video-js vjs-default-skin" controls preload="auto">
							<source :src="item.three_video" type="video/mp4"></source>
							<source :src="item.three_video" type="video/ogg"></source>
							<source :src="item.three_video" type="video/webm"></source>
							<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
								<param name="movie" value="myvideo.swf" />
								<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
							</object>
						</video>
					</div>
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="教学阶段-结束部分" name="5">
			    <div v-model="contentList_end">
			    	<div v-if="contentList_end.four_activity == ''?false:true">
				    	<h4><span class="circle"></span>教学内容</h4>
						<div class="textarea" disabled><pre>{{contentList_end.four_activity}}</pre></div>
				    </div>
				    <div v-if="contentList_end.four_activity == ''?false:true">
				    	<h4><span class="circle"></span>教师活动</h4>
						<div class="textarea" disabled><pre>{{contentList_end.four_activity}}</pre></div>
				    </div>
				    <div v-if="contentList_end.four_s_activity == ''?false:true">
				    	<h4><span class="circle"></span>学生活动</h4>
						<div class="textarea" disabled><pre>{{contentList_end.four_s_activity}}</pre></div>
				    </div>
			    </div>
			  </el-collapse-item>
			</el-collapse>
		  </div>
		</el-card>
	</div>
</template>
<script>
	import {videoPlayer} from 'vue-video-player'
	import axios from "axios"
	export default {
		props: {
			videoUrl: String,
			state: Boolean
			},
		data(){
			return {
				loading:true,
				contentList:[],
        contentList_end:[],//结束部分
				activeName:['1','2','3','4','5'],
				a:'a',
			}
		},

		methods:{
			//获取数据
			getAllContent(id){
				this.loading = false
				//获取地址栏参数id
				var id = this.$route.params.id
				this.$http.post('/api/plan/planDetail',{
					id:id
				}).then(res=>{
					this.contentList = res.data.data
          this.contentList_end = res.data.data.end_part

				})
			},
			//返回到上一页
			back(){
				this.$router.push({name:'resources'})
			},
		},

		created(){
			this.getAllContent()
		}
	}
</script>


<style>
	.el-main {
		padding: 0;
	}
	.el-card__header {
		padding:0 !important;
    border: 0;
	}
	.el-card__body {
		padding: 0 20px !important;
	}
	.el-collapse-item__header{
	 	height: 30px !important;
	 	background-color:#9cbf83 !important;
	 	padding-left: 20px !important;
	 	color: #000000 !important;
	 	font-weight: 700 !important;
	 	font-size: 16px !important;
	  }
</style>
<style lang="less" scoped>
	.box-card {
    clear: both;
		.header {
      margin-top:-2px;
			height: 50px;
			line-height: 50px;
			background-color: #dbdbdb;
      width:-webkit-calc(100% - 220px);
      width:-moz-calc(100% - 220px);
      width:calc(100% - 220px);
      position: fixed;
      z-index: 0;
			.header-teaching {
				display: inline-block;
        background:#00b02d;
        padding: 0 20px;
        color:#fff;
			}
			.head {
				padding-left: 20px;
				font-weight: 700;
			}
			.back {
				display: inline-block;
				background-color: #9cbf83;
				padding: 0 15px;
				border-radius: 5px;
				cursor: pointer;
				color: #fff;
			}
		}
		.top-teaching {
			height: 50px;
			line-height: 50px;
			position: relative;
      padding-top: 60px;
			.head {
				font-weight: 700;
				.head-content {
					color: #00b02d;
					padding: 0  20px;
				}
			}
			.top-grade {
				padding: 0 10px;
				font-size: 14px;
			}
			.export {
				position: absolute;
				display: block;
				right: 130px;
				top: 10px;
				padding: 5px 5px;
				background-color: #409EFF;
				border:0px;
				color: #fff;
				border-radius: 3px;
				height: 18px;
				line-height: 18px;
			}
			.top-homework {
				position: absolute;
				right: 50px;
				top: 10px;
				padding: 5px 5px;
				background-color: #409EFF;
				border:0px;
				color: #fff;
				border-radius: 3px;

			}
		}
		.text {
			h4 {
				padding:10px 0;
				font-size: 16px;
				.circle {
				  	display: inline-block;
				  	width: 8px;
				  	height: 8px;
				  	background: #666666;
				  	border-radius: 4px;
				  	margin-right:10px;
				}
			}
			.textarea {
				width: 98%;
				padding: 5px;
				//overflow-y:visible;
				border: 0;
				resize: none;
				padding: 10px;
				background: #eee;
				line-height: 24px;
			}
			.text-content {
				color: #00b02d;
				font-weight: 700;
				display: inline-block;
				padding: 10px 0;
				font-size: 16px;
			}
			.tupian {
				width: 200px;
				img {
					width: 200px;
				}
			}
		}
	}
	.biao {
		width: 100%;
		background-color: #fff;
		table {
			border: 1px solid #666;
			width: 90%;
			height: 100px;
		}
	}
</style>
